<template>
  <div>
    <!--
      el-upload:

      1.list-type="picture-card" 有了一个基本的样式

      2.action 必传 将来需要提供一个后端接口地址, elementui会自动帮你发送请求, 上传图片
        我们是有服务器的人, 我们可以自己发送请求 上传到我们自己的云服务器
        action="" '#' 不让他报错

      3.file-list 将来用于展示的图片数组

      4.on-preview 配置预览的函数 (一旦配置了这个属性, 就会有放大镜)
        放大镜点击以后, 就会触发预览函数

      5.limit 限制用户上传的最大数量

      6.on-remove 配置删除文件钩子 将来你点了垃圾桶, 会自动触发这个函数
        注意点: 并不是真正意义上的删除, 仅仅只是结构删除了, 数据没更新(手动更新)

      7.http-request 覆盖默认的上传行为,
        将来一旦点击+号 上传了, 就会触发这个函数

      8. on-change 添加文件, 上传成功/失败 都会触发这个钩子
        注意: 这里添加不是真正意义上的添加, 仅仅只是结构, 数据又要手动更新

      9. before-upload 文件上传之前的钩子, false/ 失败的promise  校验失败 不会上传
     -->
    <el-upload
      :class="{disabled: isDisabled}"
      action=""
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :limit="limitCount"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- <el-progress style="width: 300px" text-inside :stroke-width="20" :percentage="percent" /> -->

    <el-dialog title="预览图片" :visible="isShowImgMax" @close="isShowImgMax = false">
      <img style="display: block; width: 100%" :src="imgUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
//   id
//   key

import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDJgofFpfVUQ9C0Xr5Xjd6ID4B8oFPLxLT', // 身份识别ID
  SecretKey: 'WnsjKjslM8dtrbB6lciUzDBwSnxHI2Vh' // 身份秘钥
})

// 1.装包
// 2.导包
// 3.创建实例cos (验证你的身份)
// 4.按照文档进行上传

export default {
  name: 'ImageUpload',
  props: {
    limitCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [],
      isShowImgMax: false,
      imgUrl: ''
      // percent: 0
    }
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limitCount
    },
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    handlePictureCardPreview(file) {
      console.log('图片预览了')
      // 显示对话框
      this.isShowImgMax = true
      console.log(file.url)
      this.imgUrl = file.url
    },
    handleRemove(file, fileList) {
      // file 选中删除的那个文件{uid}
      // fileList 结构中剩下的文件数组
      // 手动更新?
      // 做法1:
      // this.fileList = [...fileList]

      // 做法2:
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // console.log('点了垃圾桶')
      // console.log(file, fileList)
    },
    handleUpload(obj) {
      // 你还没有自己手动上传到云服务器, 图片怎么展示?
      // 前端本地预览 URL.createObjectURL(file)  blob
      // 你之所以能看到图片 => 本地预览

      // obj.file => 待上传的文件对象
      // obj.file.name => 待上传的文件对象的名字
      console.log('可以上传了', obj.file)
      // uid => 文件对象的唯一标识 => 找到fileList的对应项 修改
      const uid = obj.file.uid
      const fileObj = this.fileList.find(item => item.uid === uid)
      // 出现进度条
      fileObj.status = 'uploading'
      // 但是, 我们上传到云服务器 存储桶上, 我们必须要遵循所有存储桶的规则
      cos.putObject({
        Bucket: 'hrsaas-89-1304657626', // 完整的存储桶名称
        Region: 'ap-shanghai', // 存储桶所在的地域(ap-)
        Key: parseInt(Math.random() * 9999999) + obj.file.name, // 上传到存储桶的文件名
        StorageClass: 'STANDARD', // 默认的上传模式: 标准
        Body: obj.file, // 要上传的文件对象
        // 上传时 会触发的一个函数(箭头函数 this => 组件) ,
        // 每上传一段, 就会触发一次,
        // {"loaded":131072,"total":1041668,"speed":50142.31,"percent":0.12}
        onProgress: (progressData) => {
          console.log(JSON.stringify(progressData))
          // this.percent = parseInt(progressData.percent * 100)
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // this => 组件对象
        // 成功和失败都要走的函数
        // console.log(err || data)
        if (err) {
          console.log(err)
          return
        }

        // 上传成功了
        console.log(data)

        // 修改图片路径 => 真正的云服务器的图片路径
        fileObj.url = 'https://' + data.Location

        // 用户网络太好, 他会看到 从 0% 瞬间就看到图片 => 体验不好
        // 0% => 100% => 图片
        setTimeout(() => {
          // 用于打钩 => 提示用户
          fileObj.status = 'success'
        }, 500)
      })
    },
    handleChange(file, fileList) {
      // file => 操作的文件
      // fileList => 结构中的数组
      this.fileList = [...fileList]
    },
    handleBeforeUpload(file) {
      // file => 上传的文件对象
      // this.$message.error('你的文件校验失败了')
      // return false

      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        // 大于2M
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }

      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none!important;;
    }
  }
}

</style>
